鉴于此HTML和CSS:
span { display:inline-block; width:100px; background-color:palevioletred; } <p> <span> Foo </span> <span> Bar </span> </p>
结果,SPAN元素之间将有4像素宽的空间。
我知道为什么会发生这种情况,而且我也知道可以通过删除HTML源代码中SPAN元素之间的空白来摆脱该空间,如下所示:
<p> <span> Foo </span><span> Bar </span> </p>
但是,我希望找到一种不需要篡改HTML源代码的CSS解决方案。
我知道如何使用JavaScript解决此问题-通过从容器元素(该段)中删除文本节点,如下所示:
// jQuery $('p').contents().filter(function() { return this.nodeType === 3; }).remove();
但是,仅靠CSS就能解决这个问题吗?
由于此答案已变得非常流行,因此我将对其进行大量重写。
我们不要忘记提出的实际问题:
如何删除 内联块元素 之间的空间?我希望找到一种不需要篡改HTML源代码的CSS解决方案。 可以仅使用CSS来解决此问题吗?
这 是 有可能解决这个问题单独CSS,但目前还没有 完全 强大的CSS修复。
我最初回答中的解决方案是添加font-size: 0到父元素,然后在子元素上声明一个明智font-size的选择。
font-size: 0
font-size
这在所有现代浏览器的最新版本中均有效。它可以在IE8中使用。它不会在Safari 5的工作,但它 确实 在Safari 6的Safari5的工作几乎是一个死的浏览器(0.33%,2015年8月)。
相对字体大小的大多数可能问题并不复杂解决。
但是,虽然这是一个合理的解决方案(如果您 特别需要 仅CSS的修复程序),但是如果您可以自由更改HTML(与我们大多数人一样),那么我不建议您这样做。
作为一名经验丰富的Web开发人员,我实际上是为解决此问题而做的:
<p> <span>Foo</span><span>Bar</span> </p>
恩,那就对了。我删除了inline-block元素之间HTML中的空白。
这简单。这很简单。它无处不在。这是务实的解决方案。
有时您确实必须仔细考虑空格的来源。 将用JavaScript附加另一个元素会添加空格吗? 不,如果操作正确,则不会。
让我们通过一些新的HTML,以不同的方式进行神奇的删除空白的旅程:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
您可以像我通常那样做:
<ul> <li>Item 1</li><li>Item 2</li><li>Item 3</li>
或这个:
<ul> <li>Item 1</li ><li>Item 2</li ><li>Item 3</li>
或者,使用注释:
<ul> <li>Item 1</li><!-- --><li>Item 2</li><!-- --><li>Item 3</li>
或者,如果您使用的是PHP或类似版本:
<ul> <li>Item 1</li><? ?><li>Item 2</li><? ?><li>Item 3</li>
或者,您甚至可以完全跳过某些结束标记(所有浏览器都可以):
<ul> <li>Item 1 <li>Item 2 <li>Item 3
现在,我已经用“用三十种方法将空白删除一千种不同方式”使您无聊了,希望您已经忘记了这一切font-size: 0。